var count = 0
var nodes = []
G6.registerNode('card', {
  draw(item) {
    count++
    nodes.push(item)
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const scoreTextStyle = {
      textAlign: 'center',
      fontWeight: 900,
      fontSize: 14,
      fill: '#000'
    };
    const teamNameTextStyle = {
      textAlign: 'center',
      fontSize: 12,
      fill: 'rgba(0, 0, 0, 0.45)'
    };
    const width = 134;
    const height = 60;
    const keyShape = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        width,
        height,
        fill: '#fff',
        radius: 4,
      }
    });
    group.addShape('image', {
      attrs: {
        x: 8,
        y: 8,
        width: 40,
        height: 24,
        img: model.flagA
      }
    });
    group.addShape('image', {
      attrs: {
        x: 86,
        y: 8,
        width: 40,
        height: 24,
        img: model.flagB
      }
    });
    group.addShape('text', {
      attrs: {
        ...teamNameTextStyle,
        x: 28,
        y: 52,
        text: model.teamA,
      }
    });
    group.addShape('text', {
      attrs: {
        ...teamNameTextStyle,
        x: 106,
        y: 52,
        text: model.teamB,
      }
    });
    const hierarchy = item.getHierarchy();
    group.addShape('text', {
      attrs: {
        ...scoreTextStyle,
        x: 67,
        y: 52,
        text: count + '(' + hierarchy + ')',
      }
    });    
    // group.addShape('text', {
    //   attrs: {
    //     ...scoreTextStyle,
    //     x: 67,
    //     y: 52,
    //     text: model.scoreA + ' : '+ model.scoreB,
    //   }
    // });
    return keyShape;
  },
  anchor(node) {
    const hierarchy = node.getHierarchy();
    const parent = node.getParent();
    if(parent && hierarchy > 2) {
      const bbox = node.getBBox();
      const parentBBox = parent.getBBox();      
      if(parentBBox.centerY > bbox.centerY) {
        return [
          [0, 0.5],
          [1, 0.5],
          [0.5, 1]
        ]
      } else {
        return [
          [0, 0.5],
          [1, 0.5],
          [0.5, 0],
        ]
      }
    } else if (parent && hierarchy == 2) {
      const bbox = node.getBBox();
      const parentBBox = parent.getBBox();          
      console.log('parent',parentBBox.centerY)
      console.log('box', bbox.centerY)
      if (parentBBox.centerY > bbox.centerY) {
        return [
          [1, 0.5]
        ]
      }
      return [
        [0, 0.5]
      ]
    } else {
      return [
        [0, 0.5],
        [1, 0.5],
      ]
    }
  }
});
const layout = new G6.Layouts.CompactBoxTree({
  direction: 'V',
});

const tree = new G6.Tree({
  container: 'mountNode',
  width: 760,
  height: 744,
  fitView: 'cc',
  layout,
});
tree.node({
  shape: 'card'
});
tree.edge({
  shape: 'polyline-round',
  style: {
    stroke: 'white',
    lineWidth: 1,
    strokeOpacity: 1
  }
});
tree.read(data);